<template>
    <div class="app">
        <el-card class="box-card">
            <h2>
                仿若依后台管理系统
                <!-- 全局图标测试 -->
                <el-icon :size="size" :color="color">
                    <Avatar />
                </el-icon>
            </h2>

            <el-form ref="from" :model="state.loginFrom" :rules="state.loginRules" status-icon label-width="20px"
                class="demo-ruleForm">
                <el-form-item prop="username">
                    <el-input v-model="state.loginFrom.username" :prefix-icon="Avatar" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input :prefix-icon="Unlock" type="password" autocomplete="off"
                        v-model="state.loginFrom.password">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button color="#626aef" style="color: white" type="primary" @click="setLogin">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script  setup>
import { reactive, toRefs, computed, watch, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getLogin } from "../http/api";
import { useStore } from "vuex";
import { Avatar, Unlock } from "@element-plus/icons-vue"; //elemnt-plus中图标使用 ,需要安装cnpm install @element-plus/icons-vue
import md5 from 'md5'
let router = useRouter();
let store = useStore();
const state = reactive({
  loginFrom: {
    username: "super-admin",
    password: "123456",
  },
  loginRules: {
    username: [
      {
        required: true,
        message: "请输入用户账户",
        trigger: "blur",
      },
    ],
    password: [
      {
        required: true,
        min: 6,
        max: 16,
        message: "请输入账户密码 6-16位",
        trigger: "blur",
      },
    ],
  },
});

const from = ref();
const setLogin = () => {
  from.value.validate((valid) => {
    if (valid) {
    let obj={
      username:state.loginFrom.username,
      password:md5(state.loginFrom.password)
    }
      getLogin(obj).then((res) => {
        console.log('login',res.data);
        if (res.code == 200) {
          store.dispatch("userInfos", res.data);
          setTimeout(function () {
            router.push("/menus");
            store.dispatch("getLists");
          }, 500);
        }
      });
    } else {
      return false;
    }
  });
};

</script>
<style lang="scss" scoped>
.app {
    .box-card {
        width: 500px;
        padding: 20px;
        height: 342px;
        position: relative;
        left: 50%;
        transform: translate(-50%, 70%);

        .el-form-item {
            padding: 5px 0px;
            text-align: right;

            .el-button {
                width: 100%;
                display: block;
            }
        }
    }
}
</style>